<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="command/echarts/echarts.min.js"></script>
    <script src="command/jquery/jquery-3.4.1.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript">


    let Data = {
        name: [],
        timeData: [],
        scorenum: [],
        follow: [],
        downloads: [],
        appnum: [],
        score: []
    };

    $.ajax({
        url: "/selectDevelop",         //设置数据访问接口
        method:"GET",
        dataType:"json",
        async: false,
        success: function (data) {
            for (let i = 0; i < data.length; i++){
                Data.name.push(data[i].name);
                Data.timeData.push(i);
                Data.scorenum.push(data[i].scorenum);
                Data.follow.push(data[i].follow);
                Data.downloads.push(data[i].downloads);
                Data.appnum.push(data[i].appnum);
                Data.score.push(data[i].score);
            }
        },
        error :function(errorMsg) {//请求失败执行的方法
            alert("获取后台数据失败！");
        }
    });
    console.log("获取所有的标题"+Data.name);

    // 基于准备好的dom，初始化echarts实例
    var CompanyListChart = echarts.init(document.getElementById('main'));




    let colors = ['#FF6863', '#6EAB40', '#3BB5F5'];

    let option = {
        color: colors,
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'cross' },
            formatter: function(params, ticket, callback) {
                let index = params[0].dataIndex;
                let Htm = `${Data.name[index]}<br>
                    下载量:${Data.downloads[index]}万<br>
                    应用数:${Data.appnum[index]}个<br>
                    评分人数:${Data.follow[index]}<br>
                    平均评分:${Data.score[index]}`
                return Htm;
            }
        },
        grid: {
            top: '20%',
            bottom: '30%',
            left: '14%',
            right: '8%'
        },
        dataZoom: {
            bottom: '14%',
            height: '30',
            dataBackground: {
                lineStyle: { color: '#39977D' },
                areaStyle: { color: 'rgba(57,151,125,1)' }
            },
            borderColor: 'rgba(57,151,125,0.2)',
            textStyle: { color: '#39977D' },
            start: 0,
            end: 100,
            xAxisIndex: [0, 1, 2, 3]
        },
        xAxis: [{
            name: '总关注',
            type: 'category',
            position: 'bottom',
            offset: 8,
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#000000',
                    fontSize: 14,
                    backgroundColor: '#FFE282',
                    lineHeight: 20,
                    padding: [3, 3]
                },
                interval: 0
            },
            nameTextStyle: { color: '#585858', padding: [0, 0, -100] },
            nameLocation: 'start',
            data: Data.follow
        },
            {
                name: '评分人数',
                type: 'category',
                position: 'bottom',
                offset: 40,
                axisTick: { show: false },
                axisLine: { show: false },

                nameTextStyle: { color: '#585858', padding: [0, 0, -38] },
                nameLocation: 'start',
                data: Data.scorenum
            },
            {
                type: 'category',
                axisLine: { show: false },
            },
            {
                type: 'category',
                position: 'bottom',
                offset: 80,
                axisTick: { alignWithLabel: true, textStyle: { color: '#707070' } },
                data: Data.timeData
            }
        ],
        yAxis: [{
            type: 'value',
            name: '下载量',
            scale: true,
            position: 'left',
            offset: 54,
            axisTick: { lineStyle: { color: colors[0] }, inside: true },
            nameTextStyle: { color: colors[0] },
            axisLabel: { color: colors[0] },
            splitLine: { show: false }
        },
            {
                type: 'value',
                name: '应用数',
                position: 'left',
                axisTick: { lineStyle: { color: colors[1] }, inside: true },
                nameTextStyle: { color: colors[1] },
                axisLabel: { color: colors[1] },
                splitLine: { show: false }
            },
            {
                type: 'value',
                name: '平均评分',
                scale: true,
                position: 'right',
                axisTick: { lineStyle: { color: colors[2] }, inside: true },
                nameTextStyle: { color: colors[2] },
                axisLabel: { color: colors[2] },
                splitLine: { show: false }
            }
        ],
        series: [{
            name: '下载量',
            type: 'line',
            step: false,
            label: { normal: { show: true, position: 'top' } },
            data: Data.downloads
        },
            {
                name: '应用数',
                type: 'bar',
                yAxisIndex: 1,
                color: '#bee6b2',
                barWidth: '50%',
                label: { normal: { show: true, position: 'top' } },
                data: Data.appnum
            },
            {
                name: '平均评分',
                type: 'line',
                step: false,
                yAxisIndex: 2,
                color: colors[2],
                label: { normal: { show: true, position: 'top' } },
                data: Data.score
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    CompanyListChart.setOption(option);
</script>
</body>
</html>